import React, { useEffect, useState, useRef } from "react";
import Taro, { useDidShow } from "@tarojs/taro";
import { View, Text, Input, Form, Canvas } from "@tarojs/components";
import { setData, getData } from "@/src/globalData";
import FooterBtn from "@/components/FooterBtn";

import "./index.scss";

let startX;
let startY;

const Index: React.FC<{}> = () => {
  let context = useRef<any>(null);
  const [isDrawer, setIsDrawer] = useState(false);

  useEffect(() => {
    context.current = Taro.createCanvasContext("board");

    var query = Taro.createSelectorQuery();

    query
      .select(".sign-bg")
      .boundingClientRect(function (rect) {
        console.log(rect);
      })
      .exec();
  }, []);

  const touchStart = (e) => {
    // 获取触摸点坐标
    startX = e.changedTouches[0].x;
    startY = e.changedTouches[0].y;
    setIsDrawer(true);
    // 画笔配置
    context.current.setStrokeStyle("black"); // 颜色
    context.current.setLineWidth(5); // 粗细
    context.current.setLineCap("round"); // 线头形状
    context.current.setLineJoin("round"); // 交叉处形状
  };

  // 开始移动
  const touchMove = (e) => {
    // 移动时坐标
    var moveX = e.changedTouches[0].x;
    var moveY = e.changedTouches[0].y;

    context.current.moveTo(startX, startY); // 找到起点
    context.current.lineTo(moveX, moveY); // 找到终点
    context.current.stroke();

    // 改变起点坐标
    startX = moveX;
    startY = moveY;
    context.current.draw(true); // 画
  };

  const onClear = () => {
    context.current.clearRect(0, 0, 1000, 1000);
    context.current.draw(true);
  };

  const toBase64 = () => {
    setTimeout(() => {
      Taro.canvasToTempFilePath({
        canvasId: "board",
        success(res) {
          
        
          Taro.getFileSystemManager().readFile({
            filePath: res.tempFilePath, //图片路径
            encoding: "base64", //编码格式
            success: (result: any) => {
              //成功的回调
              const url = `data:image/png;base64,${result.data}`;
              console.log("url-------->>", url);
              setData("signImgUrl", url);
              Taro.navigateBack();
            },
          });
        },
      });
    });
  };

  console.log("isDrawer----->>", isDrawer);
  return (
    <View className="draw-board-page">
      <View className="canvas-wrapper">
        <View className="canvas-bg">
          <Text>签名区域</Text>
        </View>
        <Canvas
          type="aaa"
          className="canvas"
          id="board"
          canvasId="board"
          disableScroll
          style="width:100%;height:100%;"
          onTouchStart={touchStart}
          onTouchMove={touchMove}
        ></Canvas>
      </View>
      <View className="option-bar">
        <View
          className="opt-it"
          onClick={() => {
            Taro.navigateBack();
          }}
        >
          返回
        </View>
        <View className="opt-it" onClick={onClear}>
          清除
        </View>
        <View className="btn" onClick={toBase64}>
          完成
        </View>
      </View>
    </View>
  );
};

export default Index;
